/**
 * desc: 组件下载弹框页面
 */

import React, { useEffect, useState } from "react";
import { Button } from 'antd';
import CommonModal from '@/components/CommonModal';
import styles from './index.module.less';

const downloadUrl = [
  { name: "菜鸟打印组件", url: "https://page.cainiao.com/waybill/cloud_printing/home.html" },
  { name: "京东打印组件", url: "https://imgniu.zhaojiafang.com/front-web/printer_component/jd_printer.exe" },
  { name: "拼多多打印组件", url: "https://meta.pinduoduo.com/api/one/app/v1/lateststable?appId=com.xunmeng.pddprint&platform=windows&subType=main" },
  { name: "唯品会打印组件", url: "https://vos.appvipshop.com/vip-lbs-printer/printer/vip_printer_release.exe" },
  { name: "抖店打印组件", url: "https://imgniu.zhaojiafang.com/front-web/printer_component/douyin_printer.exe" },
  { name: "快手打印组件", url: "https://s1-11586.kwimgs.com/kos/nlav11586/kuaishou-print-installer.exe" },
  { name: "微信打印组件", url: "https://support.weixin.qq.com/cgi-bin/mmsupportacctnodeweb-bin/pages/e4TWKgMu17AalV2l" },
  { name: "Lodop打印组件", url: "https://imgniu.zhaojiafang.com/front-web/printer_component/wph_printer.exe" },
  { name: "hiprint打印组件", url: "https://imgniu.zhaojiafang.com/front/printComponents/hiprint_win_x64-1.0.9.exe" },
  { name: "得物打印组件", url: "https://h5static.dewu.com/print-app/client/win/%E5%BE%97%E7%89%A9%E6%89%93%E5%8D%B0%20Setup.exe" },
  { name: "小红书打印组件", url: "https://xhswaybill-printer-1251524319.cos.ap-shanghai.myqcloud.com/XHPrintTool/prod/win/xiaohongshu-win.exe" },
]

export default ({ handleCancel }) => {
	
	const [open, setOpen] = useState(false);

	useEffect(() => {
		setOpen(true);
	}, [])

	const onCancel = () => {
		setOpen(false);
	}

	const afterClose = () => {
		handleCancel();
	}

  return (
    <CommonModal
      title='打印组件下载'
      open={open}
      width='624px'
      onCancel={onCancel}
			afterClose={afterClose}
      footer={[<Button key='cancel'  onClick={onCancel}>关闭</Button>]}
    >
      <div className={styles.customAlert}>
        <span role="img" aria-label="info-circle" className="anticon anticon-info-circle ant-alert-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="info-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span>
        在自己的电脑上安装打印机的相应组件并确定是打开状态后，即可操作打印快递面单！
      </div>
      <h4 className={styles.subTitle}>打印组件</h4>
      <div className={styles.printerBox}>
        {
          downloadUrl.map(item => {
            return <span className="printerItem" key={item.name} onClick={() => window.open(item.url)}>{item.name}</span>
          })
        }
      </div>

    </CommonModal>
  );
};